<template>
  <div id="app">
    <div class="block">
      &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
      <div class="block">
        <el-date-picker
          v-model="value3"
          type="year"
          placeholder="选择年"
          @change="qn"
        >
        </el-date-picker>
      </div>
    </div>
    <!--为echarts准备一个具备大小的容器dom-->
    <div id="main" style="width: 1500px;height: 850px;"></div>
  </div>
</template>
<script>
  import {statis} from '@/api/lgx/statistics'
  import * as echarts from 'echarts';
  export default {
    name: '',
    data() {
      return {
        tableData:[],
        tableData2:[],
        mycharts:{},
        yysj:[],
        yyrs:[],
        viprs:[],
        dlcs:[],
        value3:'',
        value2: '',
        charts: '',
        opinionData: ["3", "2", "4", "4", "5","6","7"],//左边的参数
        yydata:[820, 932, 901, 934, 1290, 1330, 1320]
      }
    },
    created() {
     let n= this.sj3(0)
     this.select(n);
     this.sj(n);
    },
    methods: {
      qn(){
        var nf=this.sj4(this.value3)
        this.select(nf);
      },
      async select(nf){
        try{
          let [aaa]=await Promise.all([
            statis(nf)
          ])
          this.tableData=aaa.data;
          //this.tableData=this.tableData2;
          let stast=new Array();
          let stast2=new Array();
          let stast3=new Array();
          let stast4=new Array();
          //时间
          for(var i=0;i<this.tableData.length;i++){
            stast2.push(this.tableData[i].dates)
          }
          //预约人数
          for(var i=0;i<this.tableData.length;i++){
            stast.push(this.tableData[i].yytime)
          }
          //vip人数
          for(var i=0;i<this.tableData.length;i++){
            stast3.push(this.tableData[i].zctime)
          }
          //登录次数
          for(var i=0;i<this.tableData.length;i++){
            stast4.push(this.tableData[i].dltime)
          }
          this.yyrs=stast;
          this.yysj=stast2;
          this.viprs=stast3;
          this.dlcs=stast4;
          this.dtsx(stast,stast2,stast3,stast4)
        }catch(error){
          console.log(error)
        }
      },
      sj2(data){
        var dt=new Date(data)
        var n=dt.getFullYear();
        var y=(dt.getMonth()+1).toString().padStart(2,"0");//补零操作
        var r=(dt.getDate()).toString().padStart(2,"0");
        dt.getHours();
        dt.getMinutes();
        dt.getSeconds();
        return n+"-"+y+"-"+r;
      },
      sj3(){
        var dt=new Date()
        var n=dt.getFullYear();
        return n;
      },
      sj4(data){
        var dt=new Date(data)
        var n=dt.getFullYear();
        return n;
      },
      dtsx(stast,stast2,stast3,stast4){
        //动态刷新数据,后台拿到的值放这里
        this.charts.setOption({
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: stast2
          },
          series:[ {
            name: '新增会员',
            type: 'line',
            stack: '总量',
            data: stast3
          },
            {
              name: '登录次数',
              type: 'line',
              stack: '总量',
              data: stast4
            },
            {
              name: '预约人数',
              type: 'line',
              stack: '总量',
              data:stast
            }]
        })
      },
      drawLine(id) {
        this.charts = echarts.init(document.getElementById(id))
        this.charts.setOption({
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['新增会员', '登录次数', '预约人数']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          yAxis: {
            type: 'value'
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: this.yysj
          }
        })
      }
    },
    //调用
    mounted() {
      this.$nextTick(function() {
        this.drawLine('main')
      })
    }
  }
</script>

<style>
  * {
    margin: 0;
    padding: 0;
    list-style: none;
  }
</style>
